<template>
    <!-- 新增库位 -->
    <el-dialog v-model="isShow" title="新增货架库位码" width="800">
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm">

            <el-form-item label="楼层" prop="floorStr">
                {{ treeValue.dictLabel }}
            </el-form-item>

            <div style="display: flex;">
                <el-form-item label="排 从" prop="rowStart">
                    <el-input-number v-model="formData.rowStart" min="1" max="99" />
                </el-form-item>
                <el-form-item label="到" prop="rowEnd" label-width="40">
                    <el-input-number v-model="formData.rowEnd" min="1" max="99" />
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="货架 从" prop="shelvesStart">
                    <el-input-number v-model="formData.shelvesStart" min="1" max="99" />
                </el-form-item>
                <el-form-item label="到" prop="shelvesEnd" label-width="40">
                    <el-input-number v-model="formData.shelvesEnd" min="1" max="99" />
                </el-form-item>
            </div>
            <el-form-item label="货架类型" prop="shelvesType">
                <el-select v-model="formData.shelvesType" placeholder="请选择货架类型">
                    <el-option v-for="item in hm_stock_shelves_type" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <div v-if="formData.shelvesType === 'C01'" style="display: flex;">
                <el-form-item label="层 从" prop="layerStart">
                    <el-input-number v-model="formData.layerStart" min="1" max="99" />
                </el-form-item>
                <el-form-item label="到" prop="layerEnd" label-width="40">
                    <el-input-number v-model="formData.layerEnd" min="1" max="99" />
                </el-form-item>
            </div>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="formData.status" :active-value="1" :inactive-value="2" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                <el-button type="primary" v-loading="loading" @click="submitForm(ruleFormRef)">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="isShowOne" title="提示" width="600">
        <div class="hint">
            {{ hintValue }}
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="isShowOne = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineExpose, defineEmits } from 'vue'
import { stockLocationAdd } from '@/api/depot/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hm_stock_shelves_type } = toRefs<any>(proxy?.useDict('hm_stock_shelves_type'));
const emit = defineEmits(['getList'])

const loading = ref(false)
const isShow = ref(false)
const isShowOne = ref(false)
const hintValue = ref('')
const ruleFormRef = ref()
const treeValue = ref<any>({})
const formData = ref<any>({
    floorStr: '',
    rowStart: '',
    rowEnd: '',
    shelvesStart: '',
    shelvesEnd: '',
    shelvesType: '',
    layerStart: '',
    layerEnd: '',
    status: 1
})

const int = (data: any) => {
    treeValue.value = data
    formData.value.floorStr = data?.dictValue || ''
    isShow.value = true
}
// 表单验证
const validatePass = (rule: any, value: string, callback: Function) => {
    if (value) {
        return /^([1-9]|[1-9]\d)$/.test(value)
    } else {
        callback()
    }
}
const rules = reactive({
    floorStr: [
        {
            required: true,
            message: '请输入楼层数量',
            trigger: 'change',
        }
    ],
    rowStart: [
        {
            required: true,
            message: '请输入数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
    rowEnd: [
        {
            required: true,
            message: '请输入数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
    shelvesStart: [
        {
            required: true,
            message: '请输入数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
    shelvesEnd: [
        {
            required: true,
            message: '请输入数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
    shelvesType: [
        {
            required: true,
            message: '请选择货架类型',
            trigger: 'change',
        }
    ],
    layerStart: [
        {
            required: true,
            message: '请输入数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
    layerEnd: [
        {
            required: true,
            message: '请输入数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
})

// { validator: validatePass, message: '请选择货架类型', trigger: 'blur' }

const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            apiExecute(formEl)
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 重置
const resetForm = (formEl: any) => {
    if (!formEl) return
    formData.value = {
        floorStr: '',
        rowStart: '',
        rowEnd: '',
        shelvesStart: '',
        shelvesEnd: '',
        shelvesType: '',
        layerStart: '',
        layerEnd: '',
        status: 1
    }
    isShow.value = false
}

// 接口请求
const apiExecute = async (formEl: any) => {
    loading.value = true
    try {
        const { code = 200, msg = '' } = await stockLocationAdd(formData.value)
        loading.value = false
        if (code == 200) {
            ElMessage({
                message: '新增库位码成功',
                type: 'success',
            })
            emit('getList')
            resetForm(formEl)
        } else if (code === 222) {
            hintValue.value = msg
            isShowOne.value = true
        } else {
            ElMessage({
                message: '新增库位码失败',
                type: 'error',
            })
        }
    } catch (error) {
        loading.value = false
    }
}

defineExpose({ int, isShow })

</script>
<style lang="scss" scoped>
@import url(../style/index.scss);
</style>